<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
{% load stu_filters %}


<h1>students bar pie</h1>



<hr>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="students_bar" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('students_bar'));
        var names = {{ students_data.names | js }};
        var scores = {{ students_data.scores | js }};

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '学生成绩柱状图',
                subtext: '总成绩柱状图',
                left: 'left'
            },
            tooltip: {},
            legend: {
                data:['总成绩']
            },
            xAxis: {
                data: names
            },
            yAxis: {},
            series: [{
                name: '总成绩',
                type: 'bar',
                data: scores
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

<hr>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="students_pie" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var chartDom = document.getElementById('students_pie');
        var myChart = echarts.init(chartDom);
        var failed_count = {{ students_data.failed_count | js }};
        var pass_count = {{ students_data.pass_count | js }};
        var option;

        option = {
            title: {
                text: '学生成绩饼图',
                subtext: '不及格学生比例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '学生成绩',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: failed_count, name: '不及格学生'},
                        {value: pass_count, name: '及格学生'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

<hr>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="students_stack_bar" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var chartDom = document.getElementById('students_stack_bar');
        var myChart = echarts.init(chartDom);
        var score_lt60_count_list = {{ students_data.score_lt60_count_list | js }};
        var score_let60_get80_count_list = {{ students_data.score_let60_get80_count_list | js }};
        var score_gt80_count_list = {{ students_data.score_gt80_count_list | js }};
        var option;

        option = {
            title: {
                text: '学生成绩堆叠柱状图',
                subtext: '各科成绩分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['语文', '数学', '英语']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['语文', '数学', '英语']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '<60',
                    type: 'bar',
                    stack: 'one',
                    emphasis: {
                        focus: 'series'
                    },
                    data: score_lt60_count_list
                },
                {
                    name: '60-80',
                    type: 'bar',
                    stack: 'one',
                    emphasis: {
                        focus: 'series'
                    },
                    data: score_let60_get80_count_list
                },
                {
                    name: '>80',
                    type: 'bar',
                    stack: 'one',
                    emphasis: {
                        focus: 'series'
                    },
                    data: score_gt80_count_list
                },

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>



</body>
</html>